<template>
  <div id="Setting_div">
    <!-- Card区域 -->
    <div class="Card">
      <!-- 欢迎部分 -->
      <el-card>
        <p>Hello! {{ getUserName }},欢迎登录!</p>
      </el-card>
      <!-- 班级管理部分 -->
      <el-card>
        <!-- 头部信息 -->
        <div slot="header" class="clearfix">
          <span>班级管理</span>
          <el-button
            @click="addClass = true"
            style="float: right"
            type="primary"
            size="mini"
            >新增班级</el-button
          >
          <el-button
            style="float: right; margin-right: 10px"
            type="success"
            size="mini"
            >授权其他用户</el-button
          >
        </div>
        <!-- 主体部分 -->
        <div class="class_body">
          <!-- 选择班级部分 -->
          <div class="choose_class">
            <div class="cc_left">
              <span>班级：</span>
              <el-select
                v-model="chooes_class"
                size="small"
                placeholder="请选择需要操作的班级"
              >
                <el-option
                  v-for="item in class_data"
                  :key="item.cid"
                  :label="item.cname"
                  :value="item.cid"
                >
                </el-option>
              </el-select>
            </div>
            <el-button
              type="danger"
              @click="delete_class"
              size="mini"
              class="fr delete_class_btn"
              >删除班级</el-button
            >
          </div>
          <!-- 表格部分 -->
          <div class="chooes_table">
            <el-table :data="class_setting_data" stripe style="width: 100%">
              <el-table-column prop="name" label="名称"> </el-table-column>
              <el-table-column label="当前状态">
                <template slot-scope="scope">
                  {{ trueORfalse(scope.row.status) }}
                </template>
              </el-table-column>
              <el-table-column prop="desc" label="说明"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    @change="
                      class_setting_change(
                        scope.$index + 1,
                        scope.row.name,
                        scope.row.status
                      )
                    "
                    active-value="true"
                    inactive-value="false"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-card>
      <!-- 点名方式设置 -->
      <el-card>
        <!-- 头部信息 -->
        <div slot="header" class="clearfix">
          <span>点名方式管理</span>
        </div>
        <!-- 主体部分 -->
        <div class="class_body">
          <!-- 选择部分 -->
          <div class="choose_class">
            <div class="cc_left">
              <span>点名方式：</span>
              <el-select
                v-model="chooes_order"
                size="small"
                placeholder="请选择需要设置的点名方式"
              >
                <el-option
                  v-for="item in order_data"
                  :key="item.oid"
                  :label="item.name"
                  :value="item.oid"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 功能说明 -->
          <div class="order_desc">
            <div>
              <el-tag>顺序抽取</el-tag>
              <el-tag
                >按钮触发停止循环，学生信息将循环顺序循环，类似转盘抽奖，每轮循环确保每个学生循环一次</el-tag
              >
            </div>
            <div>
              <el-tag type="success">随机抽取</el-tag>
              <el-tag type="success">按钮触发将直接显示抽中学生</el-tag>
            </div>
            <div>
              <el-tag type="info">顺序随机抽取</el-tag>
              <el-tag type="info"
                >按钮触发停止循环，学生信息将不按顺序，但每轮循环依旧确保每个学生循环一次</el-tag
              >
            </div>
          </div>
        </div>
      </el-card>
      <!-- 学生管理部分 -->
      <el-card>
        <!-- 头部信息 -->
        <div slot="header" class="clearfix">
          <span>学生管理</span>
          <el-button
            @click="addStudent = true"
            style="float: right"
            type="primary"
            size="mini"
            >添加学生</el-button
          >
          <el-button
            @click="addMoreStudent = true"
            style="float: right; margin-right: 10px"
            type="success"
            size="mini"
            >批量添加学生</el-button
          >
        </div>
        <div class="class_body">
          <!-- 选择班级部分 -->
          <div class="choose_class">
            <div class="cc_left">
              <span>班级：</span>
              <el-select
                v-model="chooes_student_class"
                size="small"
                placeholder="请选择需要操作的班级"
              >
                <el-option
                  v-for="item in class_data"
                  :key="item.cid"
                  :label="item.cname"
                  :value="item.cid"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 表格部分 -->
          <div class="chooes_table student_table">
            <el-table :data="studentList" stripe style="width: 100%">
              <el-table-column prop="sname" label="学生姓名"> </el-table-column>
              <el-table-column prop="sid" label="学号"></el-table-column>
              <el-table-column prop="desc" label="备注"> </el-table-column>
              <el-table-column label="图片" min-width="165px">
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.simg"
                    :src="scope.row.simg"
                    class="student_img"
                  />
                  <p v-else>暂无图片</p>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="200px">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="update_student_dialog(scope.row.cid, scope.row.sid)"
                    >修改信息</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    @click="
                      delete_student(
                        scope.row.sname,
                        scope.row.cid,
                        scope.row.sid
                      )
                    "
                    >删除学生</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 新增班级对话框 -->
    <el-dialog class="addClass" title="新增班级" :visible.sync="addClass">
      <span>请输入班级名称：</span>
      <el-input class="add_class_input" v-model="add_class_name"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addClass = false">取 消</el-button>
        <el-button type="primary" @click="add_class">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改学生信息对话框 -->
    <el-dialog
      class="addClass updateStudent"
      title="修改学生信息"
      :visible.sync="updateStudent"
    >
      <!-- 学生姓名部分 -->
      <span>学生姓名:</span>
      <el-input v-model="chooes_update_student.sname"></el-input>
      <!-- 学生学号部分 -->
      <span>学号:</span>
      <el-input v-model="chooes_update_student.sid" disabled></el-input>
      <!-- 学生备注 -->
      <span>备注:</span>
      <el-input v-model="chooes_update_student.desc"></el-input>
      <!-- 学生图片地址 -->
      <span>图片URL地址:</span>
      <el-input v-model="chooes_update_student.simg"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateStudent = false">取 消</el-button>
        <el-button type="primary" @click="update_student">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加学生对话框 -->
    <el-dialog
      class="addClass updateStudent"
      title="添加学生"
      :visible.sync="addStudent"
    >
      <!-- 学生姓名部分 -->
      <span>学生姓名:</span>
      <el-input v-model="add_student.sname"></el-input>
      <!-- 学生学号部分 -->
      <span>学号:</span>
      <el-input v-model="add_student.sid"></el-input>
      <!-- 学生备注 -->
      <span>备注:</span>
      <el-input v-model="add_student.desc"></el-input>
      <!-- 学生图片地址 -->
      <span>图片URL地址:</span>
      <el-input v-model="add_student.simg"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addStudent = false">取 消</el-button>
        <el-button type="primary" @click="add_new_student">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 批量添加学生 -->
    <el-dialog
      class="addClass updateStudent addMoreStudents"
      title="批量添加学生"
      :visible.sync="addMoreStudent"
    >
      <!-- 下载模板部分 -->
      <div class="downLoad">
        <span>批量添加学生Excel模板</span>
        <span style="color: #f56c6c"
          >为了确保读取准确性,请下载使用模板,且不要更改样式</span
        >
        <a
          target="_blank"
          href="https://pan.baidu.com/s/138f7nrCtRBgl9iQNn5N0cQ"
          >百度网盘 提取码:1918</a
        >
        <a target="_blank" href="https://wwe.lanzous.com/i83L1mzh9dg">蓝奏云</a>
      </div>
      <!-- 选择Excel表格部分 -->
      <div class="chooes_excel">
        <span>选择Excel文件</span>
        <el-upload
          ref="upload"
          action="/"
          :show-file-list="false"
          :on-change="importExcel"
          :auto-upload="false"
        >
          <el-button
            slot="trigger"
            icon="el-icon-upload"
            size="small"
            type="primary"
          >
            读取文件
          </el-button>
          <el-button
            type="success"
            @click="handleDownload"
            size="small"
            style="margin-left: 10px"
            :loading="downloadLoading"
            icon="el-icon-download"
            >导出添加失败项</el-button
          >
        </el-upload>
      </div>
      <!-- 表格预览 -->
      <div class="chooes_excel table-preview">
        <span>信息表格预览</span>
        <span style="color: #f56c6c"
          >以下表格信息将添加到班级:"{{ getClassName }}"中</span
        >
        <!-- 表格部分 -->
        <div class="chooes_table">
          <el-table :data="addMoreStudents_data" stripe style="width: 100%">
            <el-table-column prop="学号" label="学号"> </el-table-column>
            <el-table-column prop="姓名" label="姓名"> </el-table-column>
            <el-table-column label="图片预览">
              <template slot-scope="scope">
                <img
                  v-if="scope.row.图片地址"
                  :src="scope.row.图片地址"
                  class="student_img"
                />
                <p v-else>暂无图片</p>
              </template>
            </el-table-column>
            <el-table-column prop="备注" label="备注"> </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMoreStudent = false">取 消</el-button>
        <el-button type="primary" @click="addMoreStudent_fn()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import MyHeader from "../common/Header";
import XLSX from "xlsx";
export default {
  name: "Seetting",
  components: {
    MyHeader,
  },
  created() {
    this.getClassData();
    this.getOrderFun();
  },
  computed: {
    // 获取用户昵称
    getUserName() {
      let userinfo = window.localStorage.getItem("userinfo");
      let json_userinfo = JSON.parse(userinfo);
      console.log(json_userinfo);
      return json_userinfo.data.username;
    },
    trueORfalse() {
      return function (val) {
        if (val == "true" || val == true) {
          return "已开启";
        } else {
          return "未开启";
        }
      };
    },
    // 获取下拉框选中的班级名称
    getClassName() {
      let classes = this.class_data;
      let chooes_class = this.chooes_student_class;
      for (let index = 0; index < classes.length; index++) {
        const element = classes[index];
        if (element.cid == chooes_class) {
          return element.cname;
        }
      }
    },
  },
  data() {
    return {
      chooes_class: "",
      class_data: [],
      class_setting_data: [],
      addClass: false,
      add_class_name: "", //新增班级名称
      chooes_student_class: "", // 学生管理班级
      studentList: [], //学生列表
      updateStudent: false, // 修改学生信息对话框
      addStudent: false, // 添加学生对话框
      chooes_update_student: {
        // 需要修改的学生信息
        cid: "",
        sid: "",
        sname: "",
        simg: "",
        desc: "",
      },
      add_student: {
        // 添加学生信息
        cid: "",
        sid: "",
        sname: "",
        simg: "",
        desc: "",
      },
      addMoreStudent: false, // 批量添加学生
      addMoreStudents_data: [], // 批量添加学生数据
      downloadLoading: false, //到处Excel
      resMoreStudentData: [], // 批量添加学生 返回的 添加失败的数据
      chooes_order: "", // 选中的点名方式
      order_data: [
        { oid: "1", name: "顺序抽取" },
        { oid: "2", name: "顺序随机抽取" },
        { oid: "3", name: "随机抽取" },
      ],
    };
  },
  methods: {
    // 请求班级数据
    async getClassData() {
      let { data: res } = await this.$http.get("/classData");
      if (res.status != 200) return this.$message.error(res.message); // 错误
      this.class_data = res.data;
      console.log(this.class_data);
      if (this.class_data.length > 0) {
        // 如果列表不为空 默认选中第一个班级
        this.chooes_class = this.class_data[0].cid;
        this.chooes_student_class = this.class_data[0].cid;
      }
    },
    // 请求班级配置数据
    async getClassSettingData() {
      let { data: res } = await this.$http.get("/classSettingData", {
        params: { cid: this.chooes_class },
      });
      if (res.status != 200) return this.$message.error(res.message); // 错误
      // 请求成功
      console.log(res.data.setting);
      this.class_setting_data = res.data.setting;
    },
    // 班级配置状态改变
    async class_setting_change(index, name, state) {
      // name 配置名称
      // state 配置状态
      // chooes_class 当前选择的班级
      // console.log(this.chooes_class,name,state);
      const { data: res } = await this.$http.post("/updateClassSetting", {
        cid: this.chooes_class,
        name: name,
        status: state,
      });
      console.log(res);
      if (res.status != 200) return this.$message.error(res.message);
      this.$message.success(res.message);
    },
    // 随机数
    random(len) {
      let random_num = "";
      for (let index = 0; index < len; index++) {
        random_num += Math.floor(Math.random() * 10);
      }
      return random_num;
    },
    // 新增班级
    async add_class() {
      this.add_class_name = this.add_class_name.trim();
      if (!this.add_class_name) {
        return this.$message.error("新增班级名称不能为空!");
      }
      // 弹出新增的班级名称
      this.$message.success({
        dangerouslyUseHTMLString: true,
        message: `即将新增的班级名称为:<strong>${this.add_class_name}</strong>`,
      });
      // 发起新增班级请求
      const { data: res } = await this.$http.post("/addClass", {
        cname: this.add_class_name,
      });
      if (res.status != 200) return res.message.error(res.message);
      this.$message.success(res.message);
      this.getClassData(); // 请求班级数据
      this.add_class_name = "";
      this.addClass = false;
    },
    // 删除班级
    async delete_class() {
      // this.chooes_class 即将被删除的班级cid
      if (!this.chooes_class) return this.$message.error("请先选择班级");
      const { data: res } = await this.$http.post("/deleteClassIsok", {
        cid: this.chooes_class,
      });
      if (res.status != 200) return this.$message.error(res.message);
      console.log(res);
      this.$confirm(
        `是否确认永久删除名为"${res.data.cname}"的班级，此操作将一同删除该班级下的${res.data.student_count}名学生`,
        "删除班级最后确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          // 执行删除操作
          const { data: res } = await this.$http.post("/deleteClass", {
            cid: this.chooes_class,
          });
          if (res.status != 200) return this.$message.error(res.message);
          this.$message.success(res.message);
          // 刷新班级列表
          this.getClassData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 请求学生列表
    async getStudentList() {
      const { data: res } = await this.$http.get("/studentList", {
        params: { cid: this.chooes_student_class },
      });
      if (res.status != 200) return this.$message.error(res.message);
      this.studentList = res.data;
    },
    // 编辑学生 对话框
    async update_student_dialog(cid, sid) {
      // 请求该学生数据
      const { data: res } = await this.$http.get("/getOneStudentData", {
        params: { cid: cid, sid: sid },
      });
      if (res.status != 200) return this.$message.error(res.message);
      this.chooes_update_student = res.data;
      this.updateStudent = true;
    },
    // 修改学生信息
    async update_student() {
      const { data: res } = await this.$http.post(
        "/updateStudentDate",
        this.chooes_update_student
      );
      if (res.status != 200) return this.$message.error(res.message);
      this.$message.success(res.message);
      // 修改信息成功 刷新学生信息列表
      this.getStudentList();
      this.updateStudent = false;
    },
    // 删除学生
    async delete_student(sname, cid, sid) {
      // 确认学生
      this.$confirm(
        `是否确认删除学号"${sid}",姓名"${sname}"的学生信息`,
        "删除学生最后确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          // 执行删除
          const { data: res } = await this.$http.post("/deleteStudent", {
            cid: cid,
            sid: sid,
          });
          if (res.status != 200) return this.$message.error(res.message);
          this.$message.success(res.message);
          this.getStudentList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加学生
    async add_new_student() {
      console.log(this.chooes_student_class);
      let new_student = this.add_student;
      const { data: res } = await this.$http.post("/addStudent", {
        cid: this.chooes_student_class,
        sid: new_student.sid,
        sname: new_student.sname,
        desc: new_student.desc,
        simg: new_student.simg,
      });
      if (res.status != 200) return this.$message.error(res.message);
      this.$message.success(res.message);
      this.addStudent = false;
      this.getStudentList();
      this.add_student = {
        cid: "",
        sid: "",
        sname: "",
        simg: "",
        desc: "",
      };
    },
    // 选择Excel表格
    importExcel(file) {
      const types = file.name.split(".")[1];
      const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
        (item) => item === types
      );
      if (!fileType) {
        this.$message("格式错误！请重新选择");
        return;
      }
      this.file2Xce(file).then((tabJson) => {
        if (tabJson && tabJson.length > 0) {
          this.xlsxJson = tabJson;
          console.log(this.xlsxJson[0].sheet);
          this.addMoreStudents_data = this.xlsxJson[0].sheet;
        }
      });
    },
    file2Xce(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary",
          });
          const result = [];
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName]),
            });
          });
          resolve(result);
        };
        reader.readAsBinaryString(file.raw);
      });
    },
    // 批量添加学生
    async addMoreStudent_fn() {
      let students = this.addMoreStudents_data;
      console.log(students);
      if (students.length == 0) return this.$message.error("数据列表为空!");
      const loading = this.$loading({
        lock: true,
        text: "请稍后,批量添加学生中···",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 请求服务器
      console.log(this.chooes_student_class);
      const { data: res } = await this.$http.post("/addMoreStudents", {
        cid: this.chooes_student_class,
        student_list: students,
      });
      console.log(res);
      loading.close();
      if (res.status != 200) return this.$message.error(res.message);
      // 请求成功
      let error = res.data.error;
      let format_erroe = res.data.format_erroe;
      let repeat = res.data.repeat;
      let success = res.data.success;
      // 合并数组
      let error_data = [];
      error_data = error_data.concat(error).concat(format_erroe).concat(repeat);
      this.resMoreStudentData = error_data;
      this.addMoreStudents_data = []; // 清空列表
      // 添加结果通知
      this.$alert(
        `
        成功添加${success.length}条数据,
        ${error.length}条数据添加失败,
        ${repeat.length}条数据学号相同,
        ${format_erroe.length}条数据格式错误,
        可通过上方"导出添加失败项"按钮到处添加失败的数据,
        导出的Excel表格中,备注一栏为添加失败原因
        `,
        "批量添加结果",
        {
          confirmButtonText: "确定",
        }
      );
    },
    // 导出excel数据
    handleDownload() {
      if (this.resMoreStudentData.length <= 0) {
        return this.$message("暂无添加失败数据");
      }
      this.downloadLoading = true;
      // 懒加载该用法
      import("../../vendor/Export2Excel").then((excel) => {
        // 设置导出表格的头部
        const tHeader = ["学号", "姓名", "图片地址", "备注"];
        // 设置要导出的属性
        const filterVal = ["学号", "姓名", "图片地址", "备注"];
        // 获取当前展示的表格数据
        const list = this.resMoreStudentData;
        // 将要导出的数据进行一个过滤
        const data = this.formatJson(filterVal, list);
        // 调用我们封装好的方法进行导出Excel
        excel.export_json_to_excel({
          // 导出的头部
          header: tHeader,
          // 导出的内容
          data,
          // 导出的文件名称
          filename: "批量添加学生失败表",
          // 导出的表格宽度是否自动
          autoWidth: true,
          // 导出文件的后缀类型
          bookType: "xlsx",
        });
        this.downloadLoading = false;
      });
    },
    // 对要导出的内容进行过滤
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return this.parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    // 过滤时间
    parseTime(time, cFormat) {
      if (arguments.length === 0) {
        return null;
      }
      const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
      let date;
      if (typeof time === "object") {
        date = time;
      } else {
        if (typeof time === "string" && /^[0-9]+$/.test(time)) {
          time = parseInt(time);
        }
        if (typeof time === "number" && time.toString().length === 10) {
          time = time * 1000;
        }
        date = new Date(time);
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
      };
      const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key];
        // Note: getDay() returns 0 on Sunday
        if (key === "a") {
          return ["日", "一", "二", "三", "四", "五", "六"][value];
        }
        if (result.length > 0 && value < 10) {
          value = "0" + value;
        }
        return value || 0;
      });
      return timeStr;
    },
    // 获取点名方案
    getOrderFun() {
      let userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
      this.chooes_order = userinfo.data.order_fun;
    },
    // 点名方案改变
    async change_order_fun(val){
      const {data:res} = await this.$http.post("/updateOrderFun",{oid:val});
      if(res.status != 200) return this.$message.error(res.message);
      this.$message.success(res.message);
    }
  },
  watch: {
    // 选择的班级发生了改变
    chooes_class() {
      this.getClassSettingData();
    },
    // 学生管理的班级发生了变化
    chooes_student_class() {
      this.getStudentList();
    },
    // 选择的抽奖方案变化
    chooes_order(val,old){
      if(!old) return;
      this.change_order_fun(val);
    }
  },
};
</script>
<style lang="less" scoped>
#Setting_div {
  margin-top: 80px;
  width: 100%;
  height: 100vh;
  background-color: #eaeaea;
}
.Card {
  margin-top: 10px;
  padding: 0px 10px;
}
.el-card {
  margin-bottom: 20px;
  .chooes_table {
    margin-top: 20px;
  }
}
.addClass {
  /deep/.el-dialog {
    min-width: 300px;
  }
  .add_class_input {
    margin-top: 10px;
  }
}
.choose_class {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .cc_left {
    display: flex;
    align-items: center;
  }
}
.student_img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  //若图片不能全部显示,加上下面这条调节两个值可以设置要显示图片的哪个部分
  object-position: 50% 20%;
}
.updateStudent {
  span {
    display: block;
    margin-bottom: 6px;
  }
  .el-input {
    margin-bottom: 10px;
  }
}
.addMoreStudents {
  .downLoad {
    a {
      color: #fff;
      display: inline-block;
      padding: 5px 10px;
      background-color: #409eff;
      border-radius: 3px;
      margin-right: 10px;
    }
  }
}
.chooes_excel {
  margin-top: 20px;
}
.order_desc {
  margin-top: 10px;
  div {
    margin-bottom: 8px;
    .el-tag {
      margin-right: 5px;
    }
  }
}
</style>